<template>
  <!-- 我的福分 -->
  <div class="box">
    <div class="blessings_total">
      <span>总福分</span>
      <span class="fontSize">{{list.blessings}}</span>
    </div>
    <div class="blessings_top">
      <van-row type="flex" justify="center" align="center">
      <van-col span="8" style="border:none">
        <div class="flex_list">收入</div>
        <span class="fontSize">{{list.income}}</span>
      </van-col>
      <van-col span="8">
        <div class="flex_list">支出</div>
        <span class="fontSize">{{list.expenditure}}</span>
      </van-col>
      <van-col span="8">
         <div  class="flex_list">可转换{{D_name}}</div>
        <span class="fontSize">{{list.Convertible}}</span>
        <div
          class="blue"
          @click="showTarght"
        >转换</div>
      </van-col>
      </van-row>
    </div>
    <div class="blessings_content">
      <van-row>
        <van-col
          span="12"
          :style="{color:'rgba(0, 114, 255, 0.88)',fontSize:'16px'}"
          @click="showTime"
        >{{data_time}}
          <van-icon name="arrow-down" />
        </van-col>
        <van-col
          span="12"
          @click="showPopup"
          :style="{fontSize:'16px',color:'rgba(0, 114, 255, 0.88)'}"
        >全部
          <van-icon name="arrow-down" />
        </van-col>
        <!-- 时间 -->
        <van-popup
          v-model="time"
          :safe-area-inset-bottom="true"
          :style="{width:'86%',fontSize:'14px',borderRadius:'10px'}"
          :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
        >
          <van-datetime-picker
            v-model="currentDate"
            type="year-month"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="getTime"
            @cancel="time=false"
          />

        </van-popup>
        <!-- 类型 -->
        <van-popup
          v-model="show"
          :safe-area-inset-bottom="true"
          :style="{ height: '22%' ,width:'54%',fontSize:'14px',borderRadius:'5%'}"
          :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
        >
          <van-radio-group v-model="radio">
            <van-cell-group :style="{textAlign:'left'}">
              <van-cell
                :title="li.name"
                clickable
                @click="showStatus(li.type)"
                v-for="(li,k) in status"
                :key="k"
              >
                <van-radio
                  slot="icon"
                  :name="li.index"
                  :style="{marginRight:'4vw'}"
                />
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </van-popup>
      </van-row>
    </div>
    <div
      class="blessing_list"
      v-for="(item,i) in list.listData"
      :key="i"
    >
      <h4 style="margin:0px;">{{item.event_name}}</h4>
      <p style="margin:0px;">
        <span style="font-size:12px;color: silver;"> {{item.create_date}}</span>
        <span class="right">{{item.code_a}}</span>
      </p>
    </div>

    <p style="color:#b0aeae;display:none">本月暂无{{D_name}}申请记录</p>
  </div>
</template>

<script type="text/javascript">
import {
  Row,
  Col,
  Icon,
  Popup,
  RadioGroup,
  Radio,
  Cell,
  CellGroup,
  DatetimePicker,
} from "vant";
export default {
  data() {
    return {
      radio: 0,
      show: false,
      time: false,
      list: [],
      status: [
        {
          name: "全部",
          index: 0,
          type: "ALL"
        },
        {
          name: "收入",
          index: 1,
          type: "S"
        },
        {
          name: "支出",
          index: 2,
          type: "Z"
        }
      ],
      data_time: "",
      minDate: new Date(2018, 0),
      maxDate: new Date(),
      currentDate: new Date(),
      people_userId: 0,
      corp_Id: 0,
      D_name:''
    };
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [DatetimePicker.name]: DatetimePicker,
  },
  created() {
    this.D_name = localStorage.getItem("d_name");
    this.people_userId = localStorage.getItem("userId");
      this.corp_Id = localStorage.getItem("custid");
    // this.corp_Id = this.$utils.getUrlKey("custid");
    this.dataTime();
     dd.biz.navigation.setTitle({
        title: "我的福分" //控制标题文本，空字符串表示显示默认文本
      });
  },
  methods: {
    showTime() {
      this.time = true;
    },
    getTime(time) {
      const d = new Date(time);
      let yy = d.getFullYear();
      let mm = this.p(d.getMonth() + 1);
      const resDate = d.getFullYear() + "-" + this.p(d.getMonth() + 1);
      this.data_time = resDate;
      this.getMyBlessings("ALL", resDate);
      this.time = false;
    },
    p(s) {
      return s < 10 ? "0" + s : s;
    },
    dataTime() {
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let month;
      if (mm < 10) {
        month = "0" + mm;
      } else {
        month = mm;
      }
      let year = yy + "-" + month;
      this.getMyBlessings("ALL", year);
      this.data_time = year;
    },
    showStatus(type) {
      this.getMyBlessings(type, this.data_time);
      this.show = false;
    },
    async getMyBlessings(type, year) {
      const res = await this.$http.get(
        `yuepoints/myBlessings?corpId=${this.corp_Id}&userId=${this.people_userId}&type=${type}&date=${year}`
      );
      this.list = res.data.data;
    },
    showPopup() {
      this.show = true;
    },
    showTarght() {
      this.$router.replace("/transformation");
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  font-size: 15px;
  padding-bottom: 55px;
   background: #f8f8fa;
  .blessings_total {
    background: #fff;
    border-bottom: 1px solid #d5d2d26e;
    padding: 30px 0px;
    span {
      display: block;
    }
  }
  .blessings_top {
    background: #fff;
    border-bottom: 1px solid #d5d2d26e;
    /deep/ .van-col{
      padding-top:15px;
      height: 120px;
      // line-height: 100px;
      border-left: 1px solid #d5d2d26e
    }
    .flex_list{
      margin: 10px;
    }
    .blue{
      color:rgba(0, 114, 255, 0.88);
    }
  }
  .blessings_content {
    background: #fff;
    height: 45px;
    line-height: 45px;
    // border-bottom: 1px solid silver;
    margin: 5px 0px;
  }
  .blessing_list {
    // border-top: 1px solid #c0c0c059;
    border-bottom: 1px solid #d5d2d26e;
    background: #fff;
    text-align: left;
    padding: 5px 15px;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
  .fontSize {
    font-size: 22px;
  }
}
</style>
